<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title> - 新闻列表</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <!-- Data Tables -->
    <link href="css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">

    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">

    <script type="text/javascript" src="/pages/js/jquery.min.js"></script>
    <script type="text/javascript">

        $(function () {
            loadNews();
            $("#checkAll").click(checkAll);
        })
        //加载新闻信息数据
        function loadNews() {
            var title = $("#title").val(),
                    label = $("#label").val(),
                    author = $("#author").val();
            var pageSize = $("#pageSize").val();
            var pageNo = $("#pageNo").val();
            var url = "/news/page";
            $.post(url, {
                title: title,
                label: label,
                author: author,
                pageSize: pageSize,
                pageNo: pageNo
            }, function (result) {
                if ((!result.hasOwnProperty('status'))) {
                    if (result.result.length > 0) {
                        var html = '';
                        var news = result.result;
                        for (var i = 0; i < news.length; i++) {
                            html += '<tr class="gradeX">' +
                                    '<td><input type="checkbox" name="checkItem" value="' + news[i].id + '"/></td>' +
                                    '<td>' + news[i].title + '</td>' +
                                    '<td>' + news[i].introduction + '</td>' +
                                    '<td>' + news[i].label + '</td>' +
                                    '<td>' + news[i].author + '</td>' +
                                    '<td>' + news[i].publishTime + '</td>' +
                                    '<td><a href="javascript:void(0)" onclick="detail(' + news[i].id + ')"' + '>查看详情</a>&nbsp;&nbsp;&nbsp;<a href="javascript:void(0)" onclick="deleteNews(' + news[i].id + ')"' + '>删除</a></td>' +
                                    '</tr>';
                        }
                        $("#news").html(html);
                        $("#totalCount").val(result.totalCount);
                        $("#totalPage").val(totalPage(result.totalCount,result.pageSize));
                    }
                    else {
                        $("#news").html("没有数据");
                    }
                }
                else {
                    window.location.href = "admin.html";
                }
            })
        }

        /**
         * 新闻详情
         * @param id
         */
        function detail(id) {
            localStorage['newsId'] = id;
            window.location.href = "/pages/admin/admin_newsedit_detail.html";
        }
        /**
         * 新闻删除
         */
        function deleteNews(id) {
            if (confirm("是否删除")) {
                var url = "/admin/news/delete";
                $.post(url, {id: id}, function (result) {
                    if (result.status === 1) {
                        alert("成功删除");
                        loadNews();
                    } else {
                        alert("删除失败");
                    }
                })
            }
        }

        //删除多个用户
        function batchDelete() {
            if (confirm("是否删除")) {
                confirm("是否删除");
                var items = $("input[name='checkItem']");
                var ids = '';
                for (var i = 0; i < items.length; i++) {
                    if (items.prop('checked')) {
                        ids += items.val() + ',';
                    }
                }
                $.post("/admin/news/batchDelete", {ids: ids}, function (resutl) {
                    if (result.status === 1) {
                        alert("删除成功");
                        loadNews();
                    } else {
                        alert("删除失败");
                    }
                })
            }
        }

        /*全选*/
        function checkAll() {
            var flag = $("#checkAll").prop('checked');
            var items = $("input[name='checkItem']");
            for (var i = 0; i < items.length; i++) {
                items.prop('checked', flag);
            }
        }

        function prePage() {
            var pageNo = parseInt($("#pageNo").val());
            var totalPage = parseInt($("#totalPage").val());
            if (pageNo > totalPage) {
                pageNo = totalPage;
            }
            if (pageNo < 2) {
                pageNo = 2;
            }
            $("#pageNo").val(parseInt(pageNo) - 1);
            loadNews();
        }
        function nextPage() {
            var pageNo = parseInt($("#pageNo").val());
            var totalPage = parseInt($("#totalPage").val());
            if (pageNo < 0) {
                pageNo = 0;
            }
            if (pageNo >= totalPage) {
                pageNo = totalPage - 1;
            }
            $("#pageNo").val(parseInt(pageNo + 1));
            loadNews();
        }
        function totalPage(totalCount, pageSize) {
            if (totalCount == 0) {
                return 0;
            }
            if (pageSize == 0) {
                pageSize = 9;
            }
            var totalPage = parseInt(totalCount / pageSize);
            return totalCount % pageSize == 0 ? totalPage : ++totalPage;
        }
    </script>

</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>新闻列表</h5>
                </div>
                <div class="ibox-content">

                    <div class="bars pull-left" style="margin-bottom: 16px;">
                        <div class="btn-group hidden-xs" role="group">
                            <button type="button" class="btn btn-outline btn-default">
                                <i class="glyphicon glyphicon-trash" aria-hidden="true"></i>
                            </button>
                        </div>
                    </div>

                    <div class="pull-right">
                        <div class="pull-left">
                            <input id="title" class="form-control input-outline" placeholder="按标题搜索" type="text">
                        </div>
                        <div class="pull-left">
                            <input id="label" class="form-control input-outline" placeholder="按标签搜索" type="text"
                                   style="margin-left: 5px;">
                        </div>
                        <div class="pull-left">
                            <input id="author" class="form-control input-outline" placeholder="按作者搜索" type="text"
                                   style="margin-left: 10px;">
                        </div>
                        <div class="pull-right">
                            <button class="btn" style="margin-left: 15px;" onclick="loadNews()">搜索</button>
                        </div>
                    </div>

                    <table class="table table-striped table-bordered table-hover dataTables-example">
                        <thead>
                        <tr>
                            <!-- <th data-field="state" data-checkbox="true"></th>复选框 -->
                            <th data-field=""><input type="checkbox" id="checkAll" name="checkAll"/></th>
                            <th data-field="">标题</th>
                            <th data-field="">简介</th>
                            <th data-field="">标签</th>
                            <th data-field="">作者</th>
                            <th data-field="">发布时间</th>
                            <th data-field=""></th>
                        </tr>
                        </thead>
                        <tbody id="news">

                        </tbody>
                    </table>

                    <div class="row">
                        <div class="col-sm-6">
                            <div class="dataTables_info" id="DataTables_Table_0_info" role="alert" aria-live="polite"
                                 aria-relevant="all">共 <input id="totalPage" value="1" readonly style="width: 30px;"/>页，每页
                                <input id="pageSize" value="9" readonly style="width: 30px;"/>
                                条数据<input id="totalCount" type="text" hidden value="1">
                            </div>
                            <div class="col-sm-6" style="float: right;">
                                <div class="dataTables_paginate paging_simple_numbers">
                                    <ul class="pagination">
                                        <li class="paginate_button">
                                            跳转到第&nbsp;<input type="text" id="pageNo" value="1" style="width: 30px;">&nbsp;页
                                        </li>
                                        <li class="paginate_button previous">
                                            <a href="javascript:void(0);" onclick="prePage()">上一页</a>
                                        </li>

                                        <li class="paginate_button next">
                                            <a href="javascript:void(0);" onclick="nextPage()">下一页</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
        </div>
    </div>
</div>

<!-- 全局js -->
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.6"></script>

<!-- <script src="js/plugins/jeditable/jquery.jeditable.js"></script> -->

<!-- Data Tables -->
<!-- <script src="js/plugins/dataTables/jquery.dataTables.js"></script>
<script src="js/plugins/dataTables/dataTables.bootstrap.js"></script> -->

<!-- 自定义js -->
<script src="js/content.js?v=1.0.0"></script>


<!-- Page-Level Scripts -->
<script>
    $(document).ready(function () {
        $('.dataTables-example').dataTable();

        /* Init DataTables */
        var oTable = $('#editable').dataTable();

        /* Apply the jEditable handlers to the table */
        oTable.$('td').editable('../example_ajax.php', {
            "callback": function (sValue, y) {
                var aPos = oTable.fnGetPosition(this);
                oTable.fnUpdate(sValue, aPos[0], aPos[1]);
            },
            "submitdata": function (value, settings) {
                return {
                    "row_id": this.parentNode.getAttribute('id'),
                    "column": oTable.fnGetPosition(this)[2]
                };
            },

            "width": "90%",
            "height": "100%"
        });


    });

    function fnClickAddRow() {
        $('#editable').dataTable().fnAddData([
            "Custom row",
            "New row",
            "New row",
            "New row",
            "New row"]);

    }
</script>


</body>

</html>
